<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading"   >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<empty :text="$t('user.您当前还未绑定银行卡')" icon="/pages/user/static/default.png" :show="emptyShow">
			<view class="button-box e-p-t-60">
				<e-button size="large" type="primary" shape="circle" :text="$t('user.去绑定')"
					@click="$goTo('/pages/user/bankCard/binding')"></e-button>
			</view>
		</empty>
		<view class="card-box e-rela e-flex bg-white e-m-b-20" v-for="item in bankCardList" :key="item.id" @tap="handleSelect(item)">
			<radio class="e-m-r-40" style="transform:scale(0.8)" :checked="selectId === item.id" :color="AppSkin.primary" v-if="type" @tap.stop="handleSelect(item)" />
			<view class="e-flex e-flex-items-start e-flex-1">
				<view class="e-m-r-20">
					<load-image mode="aspectFill" :size="['48rpx']" shape="circle" :src="item.logo"></load-image>
				</view>
				<view class="e-flex-1">
					<view class="e-m-b-26 e-p-r-40">
						<text class="c-31 e-font-32 fw-600 ">{{item.bankname}}</text>
					</view>
					<view >
						<text class="c-31 e-font-32 fw-600">{{shield({
							str:item.bankcode,
							type:2,
							start:0,
							end:4,
							shieldCode:'**** **** **** '
						})}}</text>
					</view>
				</view>
			</view>
			<image class="card-box__icon e-abso"  src="/pages/user/static/icon1.png" @tap.stop="deleteCard(item.id)"></image>
		</view>
		<view class="fixed-button e-flex-xy-center bg-white" v-if="bankCardList.length">
			<view class="e-flex-1">
				<e-button size="large" type="primary" shape="circle" :text="$t('user.绑定新银行卡')" @click="$goTo('/pages/user/bankCard/binding')"></e-button>
			</view>
			
		</view>
		<view style="height: 160rpx;">

		</view>
		<e-action-sheet :actions="actions" round="20rpx 20rpx 0 0" closeOnClickOverlay  :show="show" @close="show = false" @select="handleDel"></e-action-sheet>
	</view>
</template>
<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
	import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn'
	export default defineComponent({
		mixins: [layoutPageTitleMixIn],
	})
</script>
<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { getBankCardList, postDleBankCard,type BankCardItem } from '@/common/request/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {shield} from '@/common/utils'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	
	const props = defineProps<{
		type?:string
	}>()
	
	const ctx = useCurrentInstance()
	
	const bankCardList = ref<BankCardItem[]>([])
	const loading = ref(false)
	const emptyShow = computed(() => {
		return !bankCardList.value.length
	})
	


	const getData = () => {
		loading.value = true
		getBankCardList().then(res => {
			bankCardList.value = res.data.rows
		}).finally(() => {
			loading.value = false
		})
	}
	const selectId = ref(-1)
	const handleSelect = (data:BankCardItem) => {
		if(props.type){
			selectId.value = data.id
			const eventChannel = ctx.getOpenerEventChannel();
			eventChannel.emit('SelectBankCard',data)
			ctx.$back()
		}
		
	}
	
	
	const show = ref(false)
	
	const actions = computed(() => {
		return [{
			name: ctx.$t('user.解除绑定')
		}]
	})
	let cardId = -1
	const handleDel = () => {
		show.value = false
		ctx.$showModal({
			content: ctx.$t('user.是否删除银行卡'),
			success: res => {
				if (res.confirm) {
					postDleBankCard(cardId).then(res => {
						getData()
					})
				}
			}
		})
	}
	const deleteCard = (id : number) => {
		cardId = id
		show.value = true

	}


	onShow(() => {
		getData()
	})
</script>
<style>
	page {
		padding: 20rpx 30rpx;
	}
</style>
<style scoped lang="scss">
	.c-31 {
		color: #313133;
	}

	.p-t-226 {
		padding-top: 226rpx;
	}

	.button-box {
		width: 278rpx;
		margin: 0 auto;
	}

	.card-box {
		padding: 40rpx 30rpx;
		border-radius: 6rpx;
		&__icon{
			width:34rpx;
			height:6rpx;
			right:30rpx;
			top:40rpx
		}
	}

	.fixed-button {
		@include fixed-bottom;
		height: 140rpx;
		padding:0 30rpx;

	}
</style>